import React from 'react'
import { Table, TableBody, TableRow, TableCell } from '@/components/ui/table'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from '@/components/ui/tooltip'
import type { PieceAnalysis } from '@/types/piece'
import { calResultEffect } from '@/utils/pieceAnalysis'

interface ResultTableProps {
  totalScore: PieceAnalysis[]
  showDetailCols: boolean
  hasJewel: boolean
  scoreCount: number
  equipColumnNames: string[]
  jewelryColumnNames: string[]
}

const ResultTable: React.FC<ResultTableProps> = ({
  totalScore,
  showDetailCols,
  hasJewel,
  scoreCount,
  equipColumnNames,
  jewelryColumnNames
}) => {
  return (
    <TooltipProvider>
      <Table
        className={`my-4 border-collapse border border-gray-400 text-sm ${
          showDetailCols
            ? 'w-full min-w-[700px]'
            : 'mx-auto w-full min-w-0 max-w-[600px]'
        }`}
        style={!showDetailCols ? { tableLayout: 'fixed', width: '100%' } : {}}
      >
        <thead>
          <tr>
            <th
              className={`${
                showDetailCols ? 'w-32' : 'w-32 sm:w-28 md:w-24'
              } whitespace-nowrap border border-gray-400 py-0 text-center text-sm`}
            >
              属性
            </th>
            {showDetailCols &&
              [...Array(scoreCount)].map((_, idx) => {
                const bgColor =
                  idx >= 0 && idx <= 8
                    ? 'bg-green-100'
                    : hasJewel && idx >= 9 && idx <= 14
                      ? 'bg-red-100'
                      : ''
                const tooltipText =
                  idx >= 0 && idx <= 8 ? '装备效果' : '首饰效果'
                let colName = ''
                if (idx >= 0 && idx <= 8) {
                  colName = equipColumnNames[idx] || `${idx + 1}`
                } else if (hasJewel && idx >= 9 && idx <= 14) {
                  colName = jewelryColumnNames[idx - 9] || `${idx + 1}`
                } else {
                  colName = `${idx + 1}`
                }
                return (
                  <Tooltip key={idx}>
                    <TooltipTrigger asChild>
                      <th
                        className={`w-10 border border-gray-400 py-0 text-center text-xs font-bold tracking-normal ${bgColor}`}
                      >
                        {colName}
                      </th>
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>{tooltipText}</p>
                    </TooltipContent>
                  </Tooltip>
                )
              })}
            <th
              className={`${
                showDetailCols ? 'w-16' : 'w-16 sm:w-14 md:w-12'
              } border border-gray-400 py-0 text-center text-sm`}
            >
              合计
            </th>
            <th
              className={`${
                showDetailCols ? 'w-20' : 'w-20 sm:w-16 md:w-12'
              } border border-gray-400 py-0 text-center text-sm`}
            >
              效果
            </th>
          </tr>
        </thead>
        <TableBody>
          {totalScore.map((item) => (
            <TableRow key={item.id} className="h-8 border border-gray-400">
              <TableCell
                className={`${
                  showDetailCols ? 'w-36' : 'w-32 sm:w-28 md:w-24'
                } whitespace-nowrap border border-gray-400 py-0 text-center text-sm`}
              >
                {item.title}
              </TableCell>
              {showDetailCols &&
                item.scores.map((score, idx) => {
                  const bgColor =
                    idx >= 0 && idx <= 8
                      ? 'bg-green-100'
                      : hasJewel && idx >= 9 && idx <= 14
                        ? 'bg-red-100'
                        : ''
                  const tooltipText =
                    idx >= 0 && idx <= 8 ? '装备效果' : '首饰效果'
                  return (
                    <Tooltip key={idx}>
                      <TooltipTrigger asChild>
                        <TableCell
                          className={`relative w-12 border border-gray-400 py-0 text-center align-middle text-sm hover:bg-gray-200 dark:hover:bg-gray-700 ${bgColor}`}
                        >
                          {score ?? ' '}
                        </TableCell>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p>{tooltipText}</p>
                      </TooltipContent>
                    </Tooltip>
                  )
                })}
              <TableCell
                className={`${
                  showDetailCols ? 'w-16' : 'w-16 sm:w-14 md:w-12'
                } border border-gray-400 py-0 text-center text-sm`}
              >
                {item.result}
              </TableCell>
              <TableCell
                className={`${
                  showDetailCols ? 'w-20' : 'w-20 sm:w-16 md:w-12'
                } border border-gray-400 py-0 text-center text-sm`}
              >
                {calResultEffect(item.result, item.effect)}
              </TableCell>
            </TableRow>
          ))}
          {totalScore.length === 0 && (
            <TableRow className="h-8">
              <TableCell
                className="border border-gray-400 py-0 text-center text-sm"
                colSpan={showDetailCols ? scoreCount + 3 : 3}
              >
                暂无数据
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </TooltipProvider>
  )
}

export default ResultTable
